﻿

    <div class="dropdown-menu border border-danger p-3" style="position:absolute;z-index:999;top:33px;left:-10px; width:600px;">
        <div class="float-left" style="width:99%">
            <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" href="#tab-upload-image" data-toggle="tab">上传图片</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#tab-image-link" data-toggle="tab">外部图片</a>
                </li>
            </ul>
            <div class="tab-content mt-3">
                <div class="tab-pane fade show active" id="tab-upload-image" role="tabpanel" aria-labelledby="tab-upload-image">

                    <div id="chooseFile">选择图片</div>
                    
                    <div class="clearfix"></div>
                    <ul class="list-group">
                        <li class="list-group-item" v-for="item in files">
                            <div class="row">
                                <div class="col-5">
                                    <span v-if="item.status=='success'" class="pointer hover-underline" @@click="insertImageLink(item.webFileUrl,item.name)">
                                        {{item.name}}
                                    </span>
                                    <span v-else>
                                        {{item.name}}
                                    </span>
                                </div>
                                <div class="col-5">
                                    <div class="progress">
                                        <div class="progress-bar" v-bind:style="{width:item.progress+'%'}">
                                            <span style="min-width:2em">{{item.progress}}%</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-2">
                                    <span class="badge badge-secondary" v-if="item.status=='ready'" @@click="removeFromQueue(item.file)">
                                        <i class="fa fa-trash"></i> 移除
                                    </span>
                                    <span class="badge badge-danger" v-if="item.status=='error'" @@click="removeFromQueue(item.file)">
                                        <i class="fa fa-times"></i> 错误
                                    </span>
                                    <span class="pointer badge badge-success" v-if="item.status=='success'" @@click="insertImageLink(item.webFileUrl,item.name)">
                                        <i class="fa fa-check"></i> 插入
                                    </span>
                                    <span class="badge badge-info" v-if="item.status=='progress'">
                                        <i class="fa fa-upload test-primary"></i> 上传中
                                    </span>
                                </div>
                            </div>

                        </li>
                    </ul>


                </div>
                <div class="tab-pane fade" id="tab-image-link" role="tabpanel" aria-labelledby="tab-image-link">
                    <div class="form-group">
                        <div class="input-group input-group-lg">
                            <input type="text" class="form-control" placeholder="图片的链接 URL 地址" />
                            <div class="input-group-append">
                                <button class="btn btn-primary" onclick="let input = $(this).parent().prev('input'); if (input.val() == '') { return; } insertImageLink(input.val(), input.val()); input.val('')">插入图片</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="float-right pointer" style="width:1%" onclick="showUploadPanel($(this).parent().prev('button'))">X</div>
    </div>